<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link
        rel="stylesheet"
        href="style.css"
    >
</head>

<body>
    <section>
        <img
            src="bg.jpg"
            id="bg"
        >
        <img
            src="moon.png"
            id="moon"
        >
        <img
            src="mountain.png"
            id="mountain"
        >
        <img
            src="road.png"
            id="road"
            road
        >
        <h2 id="text">
            Moon Light
        </h2>
    </section>
    <script>
        let bg = document.querySelector('#bg')
        let moon = document.querySelector('#moon')
        let mountain = document.querySelector('#mountain')
        let road = document.querySelector('#road')
        let text = document.querySelector('#text')

        window.addEventListener('scroll', () => {
            var value = window.scrollY;

            bg.style.top = value * 0.5 + 'px';
            moon.style.left = -value * 0.5 + 'px';
            mountain.style.top = -value * 0.15 + 'px';
            road.style.top = value * 0.15 + 'px';

            text.style.top = value * 1 + 'px';


        })
    </script>

</body>

</html>